import React from 'react';
import Stack from '@mui/joy/Sheet';
import Typography from '@mui/joy/Typography';
import Add from '@mui/icons-material/Add';
import Table from '@mui/joy/Table';
import IconButton from '@mui/joy/IconButton';
import Input from '@mui/joy/Input';
import Checkbox from '@mui/joy/Checkbox';
import { useParams } from 'react-router';
import { Link as ReactLink } from 'react-router-dom';
import MUILink from '@mui/joy/Link';
import Layout from '../layout';
import Markdown from 'react-markdown';

interface Todo {
  id: string;
  title: string;
  estimate: string;
  complete: boolean;
}

export default function Todos() {
  const params = useParams();
  const tenantId = params.tenantId;

  const [todos, setTodos] = React.useState<Todo[]>([]);
  const [tenantName, setTenantName] = React.useState(null);
  const [error, setError] = React.useState<string>('');

  const headers: HeadersInit = new Headers();
  headers.set('X-Tenant-Id', tenantId || '');
  headers.set('Content-Type', 'application/json');

  React.useEffect(() => {
    fetch(`/api/todos`, {
      method: 'GET',
      headers: headers,
    })
      .then((res) => {
        console.log(res);
        if (!res.ok) {
          setError('Error fetching todos ' + res.status + ' ' + res.statusText);
          return res.json();
        } else {
          setError('');
          return res.json();
        }
      })
      .then((data) => setTodos(data));
  }, [tenantId]);

  React.useEffect(() => {
    fetch(`/api/tenants/${tenantId}`)
      .then((res) => res.json())
      .then((data) => setTenantName(data.name));
  }, [tenantId]);

  return (
    <Layout>
      <Stack sx={{ maxWidth: '80%' }}>
        <Typography
          level="h2"
          textAlign={'center'}
          sx={{ textTransform: 'uppercase', margin: '10px' }}
        >
          {tenantName}'s Todos
        </Typography>
        <div
          style={{ justifyContent: 'center', display: 'flex', margin: '10px' }}
        >
          <MUILink
            component={ReactLink}
            to="/tenants"
            justifyContent={'center'}
          >
            (Back to tenant selection){' '}
          </MUILink>
        </div>
        <form
          name="newtodo"
          id="newtodo"
          onSubmit={(event) => {
            event.preventDefault();
            const title = (event.currentTarget.elements[1] as HTMLInputElement)
              .value; // first element is the button
            handleAdd(title);
          }}
          style={{ display: 'flex', flexWrap: 'nowrap', width: '100%' }}
        >
          <IconButton type="submit">
            {' '}
            <Add />{' '}
          </IconButton>
          <Input
            placeholder="Add task"
            variant="outlined"
            id="todo"
            name="todo"
            sx={{ width: '80%' }}
          ></Input>
        </form>
        <Table>
          <caption>
            Estimates are generated by a very smart Llama 🦙 (3.1 405B){' '}
          </caption>
          <tbody>
            <tr>
              <th style={{ width: '60%' }}> Task </th>
              <th> AI estimate</th>
            </tr>
            {(() => {
              if (!todos) {
                return (
                  <tr>
                    <td colSpan={2}>
                      <Typography level="h2" textAlign={'center'}>
                        {' '}
                        Loading...
                      </Typography>
                    </td>
                  </tr>
                );
              } else if (error != '') {
                return (
                  <tr>
                    <td colSpan={2}>
                      <Typography level="h2" textAlign={'center'}>
                        {' '}
                        {error}
                      </Typography>
                    </td>
                  </tr>
                );
              } else {
                return todos.map((todo) => (
                  <tr>
                    <td style={{ width: '60%' }}>
                      <Checkbox
                        label={<Typography>{todo.title}</Typography>}
                        checked={todo.complete}
                        onChange={() => completeTodo(tenantId, todo)}
                      />
                    </td>
                    <td>
                      {' '}
                      <Markdown>
                        {todo.estimate
                          ? String(todo.estimate).replaceAll('\n', '  \n')
                          : 'No estimate found'}
                      </Markdown>
                    </td>
                  </tr>
                ));
              }
            })()}
          </tbody>
        </Table>
      </Stack>
    </Layout>
  );

  function handleAdd(title: string) {
    fetch(`/api/todos`, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({
        title: title,
        complete: false, // new todos are always incomplete
      }),
    })
      .then((resp) => resp.json())
      .then((datum) => {
        console.log(datum);
        var curr_state = todos.slice(); // need to copy so React will notice state change
        curr_state.push({
          title: datum.title,
          id: datum.id,
          estimate: datum.estimate,
          complete: datum.complete,
        });
        setTodos(curr_state);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  function completeTodo(tenantId: string | undefined, todo: Todo) {
    const newComplete = !todo.complete;
    if (!tenantId) {
      console.error('No tenantId');
      return;
    }
    fetch(`/api/tenants/${tenantId}/todos`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: todo.id,
        complete: newComplete,
      }),
    })
      .then((resp) => {
        console.log(resp);
        if (resp.status !== 200) {
          throw new Error('Error: ' + resp.statusText + ' ' + resp.status);
        }
        var curr_state = todos.slice(); // need to copy so React will notice state change
        if (curr_state) {
          let curr_todo = curr_state.find((t) => t.id === todo.id);
          if (curr_todo) {
            curr_todo.complete = newComplete;
          }
        }
        setTodos(curr_state);
      })
      .catch((error) => {
        console.error(error);
      });
  }
}
